<script setup lang="ts">
import PdSwiper from './componets/PdSwiper.vue'
import PdPdGrid from './componets/PdGrid.vue'
import PdScrollMovieList from './componets/PdScrollMovieList.vue'
import PdwaterfallList from './componets/PdwaterfallList.vue'
import type { BannerItem } from '@/types/home'
import type { GridItem } from '@/types/Grid'
import type { MovieItem } from '@/types/movieItem'
import type { ArticleItem } from '@/types/article'
import { ref } from 'vue'
import { getHomeBannerAPI } from '@/services/home'
import { getHomeGridAPI } from '@/services/grid'
import { getMovieItemAPI } from '@/services/movieItem'
import { getArticleItemAPI } from '@/services/article'
import { onLoad } from '@dcloudio/uni-app'



const bannerList = ref<BannerItem[]>([])
const gridList = ref<GridItem[]>([])
const hotMovieItemList = ref<MovieItem[]>([])
const ArticleItemList = ref<ArticleItem[]>([])



// 获取轮播图数据
const getBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}


// 获取九宫格分类数据
const getHomeGridData = async () => {
  const res = await getHomeGridAPI()
  gridList.value = res.result
}


// 获取热映电影数据
const getMovieItemData = async () => {
  const res = await getMovieItemAPI()
  hotMovieItemList.value = res.result
}

// 获取热映电影数据
const getArticleItemData = async () => {
  const res = await getArticleItemAPI()
  ArticleItemList.value = res.result
}


// 页面加载
onLoad(async () => {
  await Promise.all([getBannerData(), getHomeGridData(), getMovieItemData(), getArticleItemData()])

  console.log('页面加载完成');

})
</script>




<template>

  <!-- 轮播图组件 -->
  <PdSwiper :list="bannerList" />

  <!-- 九宫格组件 -->
  <PdPdGrid :list="gridList" />

  <!-- 横向滚动电影列表组件 -->
  <PdScrollMovieList :list="hotMovieItemList" />
  <!-- 瀑布流列表组件 -->
  <PdwaterfallList :list="ArticleItemList" />


</template>

<style lang="scss">
page {
  background: #F1F1F1;
}
</style>
